<template>
  <div style="width: 100%;background-color: transparent" :class="menuBgColor">
    <el-menu class="el-menu-demo" mode="horizontal" :default-active="activeIndex" :router="true"
             @select="onSelectMenu"
             active-text-color="#409EFF"
             :text-color="menuTextColor">
      <el-menu-item index="/page">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">分类</template>
        <el-menu-item index="#-2-1">Android</el-menu-item>
        <el-menu-item index="#-2-2">Vue</el-menu-item>
        <el-menu-item index="#-2-3">Java</el-menu-item>
        <el-menu-item index="#-2-4">小程序</el-menu-item>
      </el-submenu>
      <!-- <el-submenu index="3">
         <template slot="title">推荐网站文章</template>
         <el-submenu index="3-1">
           <template slot="title">干货集中营</template>
           <el-menu-item index="/gankio">首页</el-menu-item>
           <el-menu-item index="/girlIndex">妹纸</el-menu-item>
           <el-menu-item index="#-3-1-3">选项3</el-menu-item>
         </el-submenu>
       </el-submenu>-->
      <el-menu-item index="#-4-1">收藏</el-menu-item>
      <!--  <el-submenu index="4">
      <template slot="title">收藏</template>
        <el-submenu index="4-1">
          <template slot="title">文章</template>
          <el-menu-item index="#-4-1-1">Android</el-menu-item>
          <el-menu-item index="#-4-1-2">Vue</el-menu-item>
          <el-menu-item index="#-4-1-3">Java</el-menu-item>
        </el-submenu>
        <el-submenu index="4-2">
          <template slot="title">其他</template>
          <el-menu-item index="#-4-2-1">视频</el-menu-item>
          <el-menu-item index="#-4-2-2">音乐</el-menu-item>
        </el-submenu>
      </el-submenu>-->
      <el-menu-item index="/about">关于</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: 'HeaderContent',
    props: {
      menuTextColor: {
        type: String,
        default: 'white'
      },
      menuBgColor: {
        type: String,
        default: 'transparent'
      }
    },
    data () {
      return {
        activeIndex: this.$store.state.menuIndex === null ? '/page' : this.$store.state.menuIndex
        // activeIndex: '/page'
      }
    },
    mounted () {
      if (this.$store.state.menuState !== null && this.$store.state.menuState === 'true') {
        this.$router.push({ path: this.activeIndex })
      } else if (this.$store.state.menuState === null) {
        this.$router.push({ path: this.activeIndex })
      }
    },
    methods: {
      onSelectMenu (key, keyPath) {
        this.$store.commit('SAVE_MENU_INDEX', keyPath)
        this.$store.commit('SAVE_MENU_STATE', true)
      }
    }
  }
</script>

<style lang="scss" ref="stylesheet/scss" scoped>
  .el-menu-demo {
    padding-left: 20%;
    // background-color: rgba(21, 22, 23, 0.8);
    border-bottom: 1px solid transparent;
  }
</style>
